<template>
  <div class="form-single-fragment" style="position: relative;">
    <h3>{{item_title}}</h3>
    <el-form :model="detailData" ref="detailData" label-width="140px" size="mini" label-position="right">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="20">
          <div class="title"><h4>项目简介</h4></div>
          <div class="form-single-btn clearfix" style="right: 120px;" v-if="changeStatus==3">
            <img src="@/assets/img/adopt.png" />
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称：">{{detailData.projectName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目编号：">{{detailData.projectName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目地点：">{{detailData.areaName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型：">{{detailData.businessTypeName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位名称：">{{detailData.customerName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目状态：">{{detailData.customerName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目开始时间：">{{detailData.beginDate}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目完成时间：">{{detailData.endDate}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际完成时间：">{{detailData.endDate}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目属性：">{{detailData.projectAttributeName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联商机名称：">{{detailData.businessOpportunityName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联商机编码：">{{detailData.businessOpportunityCode}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目标段：">{{detailData.stageNumberName}}</el-form-item>
            </el-col>
          </el-row>
          <div class="title"><h4>计划变更</h4></div>
          <div class="table_container">
            <el-table :data="projectPlanDtoList" size="mini" style="width: 100%;" header-cell-class-name="table-header-gray">
              <el-table-column type="index" align="center" width="55" label="序号"></el-table-column>
              <el-table-column align="center" label="计划名称">
                <template slot-scope="scope">
                  {{scope.row.fromPlanJson ? scope.row.fromPlanJson.planName : scope.row.toPlanJson.planName}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="变更前时间">
                <template slot-scope="scope" v-if="scope.row.fromPlanJson">
                  {{$moment(scope.row.fromPlanJson.beginDate).format("YYYY-MM-DD")}}至
                  {{$moment(scope.row.fromPlanJson.endDate).format("YYYY-MM-DD")}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="变更后时间">
                <template slot-scope="scope" v-if="scope.row.toPlanJson">
                  {{$moment(scope.row.toPlanJson.beginDate).format("YYYY-MM-DD")}}至
                  {{$moment(scope.row.toPlanJson.endDate).format("YYYY-MM-DD")}}
                </template>
              </el-table-column>
              <el-table-column prop="fromPlanJson.planName" align="center" label="变更前关联任务">
                <template slot-scope="scope" v-if="scope.row.fromPlanJson">
                  <span v-for="(item, indexs) in scope.row.fromPlanJson.changeTaskDtoList"
                  :key="indexs">{{item.taskName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="avgWorkHouses" align="center" label="变更后关联任务">
                <template slot-scope="scope" v-if="scope.row.toPlanJson">
                  <span v-for="(item, indexs) in scope.row.toPlanJson.changeTaskDtoList"
                  :key="indexs">{{item.taskName}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="计划变更说明：">{{planChangeReason}}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="任务日志：">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in changeLogList"
                    :key="index"
                    :timestamp="activity.createTime">
                    {{activity.userName}}：{{activity.content}}
                  </el-timeline-item>
                </el-timeline>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-form-item style="padding: 20px 0;">
        <el-button type="primary" @click="submitForm('agree')" v-if="btnbox">同意</el-button>
        <el-button type="primary" @click="submitForm('refuse')" v-if="btnbox">拒绝</el-button>
        <el-button @click="resetForm()">返回</el-button>
      </el-form-item>
    </el-form>
    <div class="annotation" v-if="examineFrombox">
      <examineFrom ref="examineFrom" @getexamineFrom="getexamineFrom" v-model="examineFrombox"></examineFrom>
    </div>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import examineFrom from '@/components/selector/examineFrom.vue';
export default {
  name: 'PlanChange',
  components: { examineFrom },
  data () {
    return {
      item_title: '计划变更详情',
      examineFrombox: false,
      btnbox: true,
      loading: false,
      isShowloading: false,
      detailData: {},
      projectPlanDtoList: [],
      planChangeReason: '',
      changeLogList: [],
      changeStatus: 1,
      ruleForm: {
        flowTaskCommentDto: {
          approvalType: '',
          comment: ''
        },
        id: '',
        taskId: ''
      }
    };
  },
  created () {
  },
  mounted () {
    if (this.$route.query.businessKey) {
      this.ruleForm.id = this.$route.query.businessKey
      this.ruleForm.taskId = this.$route.query.taskId
      this.loadPlanWidgetData()
    }
    if (this.$route.query.taskdetail) {
      this.btnbox = false
    }
  },
  methods: {
    /**
     * 项目立项详情
     */
    loadDetailWidgetData (projectId) {
      let params = {
        id: projectId
      };
      return new Promise((resolve, reject) => {
        Administration.detail(this, params).then(res => {
          this.detailData = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 项目计划列表
     */
    loadPlanWidgetData () {
      let params = {
        changeId: this.$route.query.businessKey
      };
      return new Promise((resolve, reject) => {
        Administration.planchange(this, params).then(res => {
          this.changeStatus = res.data.changeStatus
          let projectPlanDtoList = res.data.changeDetailList
          projectPlanDtoList.forEach(item => {
            if (item.fromPlanJson) {
              item.fromPlanJson = JSON.parse(item.fromPlanJson);
            }
            if (item.toPlanJson) {
              item.toPlanJson = JSON.parse(item.toPlanJson);
            }
          })
          this.projectPlanDtoList = projectPlanDtoList
          this.planChangeReason = res.data.planChangeReason
          this.changeLogList = res.data.changeLogList
          this.loadDetailWidgetData(res.data.projectId)
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 审批
     */
    submitForm (data) {
      this.ruleForm.flowTaskCommentDto.approvalType = data
      this.examineFrombox = true
      this.$nextTick(() => {
        this.$refs.examineFrom.info()
      })
    },
    getexamineFrom (data) {
      this.isShowloading = true;
      this.ruleForm.flowTaskCommentDto.comment = data.comment
      let params = this.ruleForm;
      return new Promise((resolve, reject) => {
        Administration.submitUserPlan(this, params).then(res => {
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          });
          this.resetForm()
        }).catch(e => {
          reject(e);
        });
      });
    },
    resetForm () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
h3{border-bottom: 1px solid #E9E9EB;padding: 0 0 10px;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
.el-form-info strong{margin: 0 10px;}
.el-form-info .el-time-picker{width: 100%;}
.title{
  display: flex;align-items: center;justify-content: space-between;
  h4{font-weight: bold;}
}
.form-single-btn{position: absolute;right: 20px;top: 20px;z-index: 20;}
</style>
